<template>
  <div id="sms">
    <el-card>
      <el-form ref="ruleForm" :inline="true" class="demo-form-inline">
        <el-form-item label="平台" prop="tel">
          <el-select placeholder="选择平台" v-model="platType">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="Btn" type="primary" @click="getVideoList_axios()"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <div style="margin-bottom: 20px">
        <el-button class="Btn" type="warning" @click="open_fn()"
          >新增</el-button
        >
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center">
        </el-table-column>
        <el-table-column prop="platType" label="平台" align="center">
          <template slot-scope="scope">
            {{
              scope.row.platType == 1
                ? "抖音"
                : scope.row.platType == 2
                ? "快手"
                : scope.row.platType == 3
                ? "小红书"
                : "微信"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="version" label="版本号" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="text"
              @click="EditItem(scope.row, 0)"
              >编辑</el-button
            >
            <el-button
              icon="el-icon-delete"
              style="color: red"
              type="text"
              @click="EditItem(scope.row, 1)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :title="ruleForm.id ? '修改' : '新增'"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <el-form label-width="80px" :model="ruleForm">
        <el-form-item label="平台">
          <el-select
            v-model="ruleForm.platType"
            placeholder="请选择"
            @change="onSeleteType($event, 0)"
          >
            <el-option
              v-for="item in FormOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input style="width: 197px" v-model="ruleForm.version"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-form
            style="margin: 10px 0"
            :inline="true"
            v-for="(item, index) in ruleForm.platButtonJson"
            :key="index"
          >
            <el-form-item label="按钮key" label-width="80px">
              <el-input class="key_inputA" v-model="item.key"></el-input>
            </el-form-item>
            <el-form-item label="按钮value">
              <el-input class="key_input" v-model="item.value"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input class="key_inputA" v-model="item.beizhu"></el-input>
            </el-form-item>
            <el-form-item v-if="index + 1 == ruleForm.platButtonJson.length">
              <el-button
                class="addBtn"
                size="mini"
                type="primary"
                @click="
                  ruleForm.platButtonJson.push({
                    key: '',
                    value: '',
                    beizhu: '',
                  })
                "
              >
                +
              </el-button>
              <el-button
                class="addBtn"
                size="mini"
                type="primary"
                @click="ruleForm.platButtonJson.splice(index, 1)"
              >
                -
              </el-button>
            </el-form-item>
          </el-form>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="PushList">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getVideoList, AddVideoList, EditToker } from "@/api/system/autometion";
export default {
  name: "Automation",

  data() {
    return {
      options: [
        { label: "全部", value: "" },
        { label: "抖音", value: "1" },
        { label: "快手", value: "2" },
        { label: "小红书", value: "3" },
        { label: "微信", value: "4" },
      ],
      FormOption: [
        { label: "抖音", value: 1 },
        { label: "快手", value: 2 },
        { label: "小红书", value: 3 },
        { label: "微信", value: 4 },
      ],
      functionOptions: [
        { label: "评论私信", value: 1 },
        { label: "评论回复", value: 2 },
        { label: "通讯录加好友", value: 3 },
      ],
      platType: "",
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        version: "",
        platType: 1,
        platButtonJson: [{ key: "", value: "", beizhu: "" }],
        // functionType: 1,
      },
    };
  },
  created() {
    this.getVideoList_axios();
  },
  methods: {
    getVideoList_axios() {
      let data = {
        platType: this.platType,
      };
      getVideoList(data)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.item;
            console.log(this.tableData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    open_fn() {
      this.ruleForm = {
        version: "",
        platType: 1,
        platButtonJson: [{ key: "", value: "", beizhu: "" }],
        // functionType: 1,
      };
      this.onSeleteType(1, 0);
      this.dialogVisible = true;
    },
    PushList() {
      console.log(this.ruleForm);

      let data = {
        // functionType: this.ruleForm.functionType,
        platButtonJson: "",
        platType: this.ruleForm.platType,
        version: this.ruleForm.version,
      };
      if (this.ruleForm.id) {
        data.id = this.ruleForm.id;
      }
      this.ruleForm.platButtonJson.forEach((item, index) => {
        if (index == this.ruleForm.platButtonJson.length - 1) {
          data.platButtonJson += `"${item.key}":{"value":"${item.value}","beizhu":"${item.beizhu}"}`;
          data.platButtonJson = `{${data.platButtonJson}}`;
        } else {
          data.platButtonJson += `"${item.key}":{"value":"${item.value}","beizhu":"${item.beizhu}"},`;
        }
      });
      if (data.id) {
        EditToker(data).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.getVideoList_axios();
            this.ruleForm = {
              version: "",
              platType: 1,
              platButtonJson: [{ key: "", value: "", beizhu: "" }],
              // functionType: 1,
            };
            this.dialogVisible = false;
          }
        });
      } else {
        AddVideoList(data).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "新增成功",
            });
            this.getVideoList_axios();
            this.ruleForm = {
              version: "",
              platType: 1,
              platButtonJson: [{ key: "", value: "", beizhu: "" }],
              // functionType: 1,
            };
            this.dialogVisible = false;
          }
        });
      }

      console.log(data);
    },
    EditItem(row, type) {
      console.log(row);
      let R = row;
      let platButtonJson = JSON.parse(R.platButtonJson);
      if (type == 1) {
        this.$confirm(`是否删除当前自动化?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let data = {
              id: R.id,
              isDeleted: 1,
            };
            EditToker(data).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.getVideoList_axios();
              }
            });
          })
          .catch(() => {});
        return false;
      }
      this.ruleForm.platButtonJson = [];
      this.ruleForm.version = R.version;
      // this.ruleForm.functionType = Number(R.functionType);
      this.ruleForm.platType = R.platType;
      this.ruleForm.id = R.id;
      for (let i in platButtonJson) {
        this.ruleForm.platButtonJson.push({
          key: i,
          value: platButtonJson[i].value,
          beizhu: platButtonJson[i].beizhu,
        });
      }
      // console.log(this.ruleForm.platButtonJson);
      this.dialogVisible = true;
    },
    onSeleteType(e, type) {
      this.ruleForm.platType = type == 0 ? e : this.ruleForm.platType;
      // this.ruleForm.functionType = type == 1 ? e : this.ruleForm.functionType;
      // console.log(this.ruleForm.platType, this.ruleForm.functionType);
      if (!this.ruleForm.id) {
        let a = [];
        this.tableData.forEach((item) => {
          if (
            item.platType == e
            // this.ruleForm.functionType == item.functionType、
          ) {
            console.log(this.ruleForm.platType, e);
            console.log("平台");
            // console.log("符合条件的==》", item);
            a.push(item);
          }
        });
        if (a.length >= 2) {
          a.sort(
            (a, b) =>
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
          );
          console.log("已筛选", a[0]);
          this.SerachItem(a[0]);
        } else if (a.length == 1) {
          this.SerachItem(a[0]);
          console.log("已筛选", a[0]);
        } else if (a.length == 0) {
          this.ruleForm.version = "";
          this.ruleForm.platButtonJson = [{ key: "", value: "", beizhu: "" }];
          console.log("无筛选", a);
        }
      }
    },
    //
    SerachItem(R) {
      this.ruleForm.platButtonJson = [];
      this.ruleForm.version = R.version;
      let platButtonJson = JSON.parse(R.platButtonJson);
      for (let i in platButtonJson) {
        this.ruleForm.platButtonJson.push({
          key: i,
          value: platButtonJson[i].value,
          beizhu: platButtonJson[i].beizhu,
        });
      }
    },
  },
};
</script>

<!--<style lang="less" scope>-->
<!--#sms {-->
<!--  padding: 20px;-->

<!--  .elPage_bar {-->
<!--    margin-top: 20px;-->
<!--  }-->
<!--}-->

<!--.el-tooltip__popper {-->
<!--  max-width: 500px;-->
<!--}-->
<!--.demo-form-inline {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--}-->
<!--.Btn {-->
<!--  width: 100px;-->
<!--  height: 40px;-->
<!--  font-size: 16px;-->
<!--}-->
<!--.key_inputA {-->
<!--  width: 250px;-->
<!--}-->
<!--.key_input {-->
<!--  width: 450px;-->
<!--}-->
<!--</style>-->
